<template>
  <div>
    <div>正投影相机</div>
    <div ref="webgl"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  let scene: any = null;
  let camera: any = null;
  let render: any = null;
  onMounted(() => {
    init();
  });
  function init() {
    scene = new THREE.Scene();
    // 正投影相机
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度
    const k = width / height; //canvas画布宽高比
    const s = 600; //控制left, right, top, bottom范围大小
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);
    camera.position.set(300, 300, 300);
    camera.lookAt(scene.position);
    render = new THREE.WebGLRenderer();
    // 背景颜色
    render.setClearColor('#f1f2f6');
    render.setSize(width, height);
    webgl.value.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    const pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(100, 100, 100);
    scene.add(pointLight);
    const pointLightHelper = new THREE.PointLightHelper(pointLight);
    scene.add(pointLightHelper);
    const material = new THREE.MeshBasicMaterial({
      color: '#2b88d8',
    });

    const materialMesh = new THREE.Mesh(new THREE.BoxGeometry(20, 20, 60), material);
    materialMesh.translateX(200);
    scene.add(materialMesh);
    const box3 = new THREE.Box3();
    // box3.min = new THREE.Vector3(-10, -10, 0);
    // box3.max = new THREE.Vector3(100, 20, 50);
    box3.expandByObject(materialMesh); // 计算模型包围盒
    console.log('box3', box3);
    const scale = new THREE.Vector3();
    // getSize()计算包围盒尺寸
    // 获得包围盒长宽高尺寸，结果保存在参数三维向量对象scale中
    box3.getSize(scale);
    console.log('模型包围盒尺寸', scale);
    // 计算包围盒中心坐标
    const center = new THREE.Vector3();
    box3.getCenter(center);
    console.log('模型中心坐标', center);

    renderFun();
  }
  function renderFun() {
    render.render(scene, camera);
    requestAnimationFrame(renderFun);
  }
</script>
<style lang=""></style>
